<template>
	<view class="grid-body">
		<uni-grid :column="4" :showBorder="false" @change="changeGrid">
			<uni-grid-item>
				<view class="grid-item-box">
					<navigator url="/pages/safety/enclosureDisindection/enclosureDisindection" hover-class="navigator-hover">
						<uni-icons class="icon" type="upload-filled" size="30"></uni-icons>
						<text class="text">圈舍消毒</text>
					</navigator>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="grid-item-box">
					<navigator url="/pages/safety/yibing/yibing" hover-class="navigator-hover">
						<uni-icons class="icon" type="settings-filled" size="30"></uni-icons>
						<text class="text">猪只疫病</text>
					</navigator>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	export default {
		methods: {
			changeGrid() {
				console.log("Grid item changed");
				// 在这里定义希望在 grid 变化时执行的逻辑
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			console.log(option.name); //打印出上个页面传递的参数。
		}
	};
</script>

<style lang="scss">
	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.icon {
		display: block;
		text-align: center;
	}

	.text {
		display: block;
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}
</style>